<template>
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j.sa}}k</h2>
  <h2 v-show="person.car">car的信息：{{person.car}}</h2>
  <button @click="name+='qwe'">增长姓名</button><hr>
  <button @click="age+=1">增长年龄</button><hr>
  <button @click="job.j.sa++">涨薪</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给person添加一台车</button>
  <button @click="person.car.name = '奥迪'">换车名</button>
  <button @click="person.car.price = '143w'">换价格</button>
</template>

<script>
    import {markRaw, reactive, readonly, ref,shallowReadonly,toRaw,toRefs} from 'vue'
    export default {
        name: "Demo",
        setup(){
            let sum = ref(0)
            let person =reactive({//只响应最外层
                name:'张三',
                age:18,
                job:{
                    j:{
                        sa:20
                    }
                }
            })

            function showRawPerson(){
                console.log(person)
                let p = toRaw(person)//toRaw:把响应式数据转换为原始数据
                console.log(p);
            }

            function addCar(){
                let car = {
                    name:'宝马',
                    price: '78w'
                }
                person.car = markRaw(car)//markRaw：把car变成不是响应式的数据
            }

            //返回一个对象
            return {
                sum,
                person,
                ...toRefs(person),
                showRawPerson,
                addCar
            }
        }
    }
</script>